<template>
  <div>
    <myheader></myheader>
    <!--面包屑导航-->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <section class="featured-block text-center">
      <div class="container">
        <table>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品图片</th>
            <th>商品点击数</th>
          </tr>
          <tr v-for="good in goods">
            <td><a target='_bank' :href="'/item?id=' + good.id">{{ good.name }}</a></td>
            <td>{{ good.price}}</td>
            <td>
              <img
                :src="qiniuurl + good.img"
                alt
                width="120"
                height="120"
                class="rounded-corners img-fluid"
              />
            </td>
            <td>{{ good.clicks }}</td>
          </tr>
        </table>
      </div>
    </section>
    <mytail></mytail>
  </div>
</template>

<script>
// 导包
import myheader from "./myheader.vue";
import mytail from "./mytail";
import { config } from "../config";


export default {
  name: "search",
  data() {
    return {
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "登陆页面", route: { name: "login" } },
        { title: "商品检索" }
      ],
      word: "",
      goods: "",
      qiniuurl: config["qiniu"],
      
    };
  },
  //注册组件标签
  components: {
    myheader: myheader,
    mytail: mytail
  },
  mounted() {
    this.word = this.$route.query.word;
    this.get_good();
  },
  watch: {
    $route(to, from) {
      this.word = this.$route.query.word;
      this.get_good();
    }
  },
  methods: {
    
    // 获取检索之后的数据
    get_good: function() {
      if (this.word != "") {
        this.axios.get("http://localhost:8000/goodssearch/", {
            params: { word: this.word }
          }).then(result => {
            // console.log(result.data);
            this.goods = result.data;
            if (this.goods.length == 0){
              this.$Message('对不起，没有你想要得商品')
            }
          });
      }
    }
  }
};
</script>

<style scoped>
</style>
